<!doctype html>
<html>
	<head>
		<title>js特效1-幻灯片</title>
		<meta charset="utf-8">
		<style>
		body{
			margin:0;
			padding:0;
			list-style: none;
			}
			#count{
				width:1000px;
				height:135px;
				padding-top:10px;
				border:1px solid #000;
				margin:20px auto;
				position:relative;
				overflow: hidden;
			}
			#div{
				width:2000px;
				position: absolute;
			}
			#div li{
				width:200px;
				float:left;
			}
			#div1{
				width:1000px;
				height:105px;
				float:left;
			}
			#div2{
				width:1000px;
				height:105px;
				float:left;
			}
			#count img{
				width:100%;
			}
		</style>
		<script type="text/javascript">

			window.onload=function()
			{
				var oCount=document.getElementById('count');
				var oDiv=document.getElementById('div');
				var oDiv1=document.getElementById('div1');
				var oBtn1=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				var timer=null;
				var speed=3;
				oBtn1.onclick=function(){
					clearInterval(timer);
					speed=-speed;
					timer=setInterval(function(){go(speed);},50);
				}
				oBtn2.onclick=function(){
					clearInterval(timer);
					timer=setInterval(function(){go(speed);},50);
				}
			//alert('1');
			
			function go(ispeed){
				if(oDiv.offsetLeft<-oDiv1.offsetWidth)
				{
					oDiv.style.left=0+'px';
				}
				else if(oDiv.offsetLeft>=0)
				{
					oDiv.style.left=-oDiv1.offsetWidth+'px';
					
				}
				oDiv.style.left=(oDiv.offsetLeft+ispeed)+'px';
					//alert(oDiv.style.left);
			}
				timer=setInterval(function(){go(speed);},50);
			oCount.onmouseover=function(){
				clearInterval(timer);
			}
			oCount.onmouseout=function(){
				timer=setInterval(function(){go(speed);},50);
			}

			
			}
		</script>
	</head>
	<body>
	<button id="btn1">向左</button>
	<button id="btn2">向右</button>
		<div id="count">
			<div id="div">
				<div id="div1">
					<li><img src="./film/fj1.jpg" alt="加载失败"></li>
					<li><img src="./film/fj2.jpg" alt="加载失败"></li>
					<li><img src="./film/fj3.jpg" alt="加载失败"></li>
					<li><img src="./film/fj4.jpg" alt="加载失败"></li>
					<li><img src="./film/fj5.jpg" alt="加载失败"></li>
				
				</div>
				<div id="div2">
					<li><img src="./film/fj1.jpg" alt="加载失败"></li>
					<li><img src="./film/fj2.jpg" alt="加载失败"></li>
					<li><img src="./film/fj3.jpg" alt="加载失败"></li>
					<li><img src="./film/fj4.jpg" alt="加载失败"></li>
					<li><img src="./film/fj5.jpg" alt="加载失败"></li>
				</div>
			</div>
		</div>
	</body>
</html>